<template>
    <el-popover
        placement="bottom"
        trigger="click"
        v-model="show"
        @hide="popperHide">
        <div class="filter-container">
            <ask-city-cascader
                v-if="type === 'regional'"
                ref="cityCascader"
                v-model="value"
                @change="changeCity"
                :showModel="showModel"
                clear />
            <el-date-picker
                v-if="type === 'date'"
                v-model="value"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                @change="changeTime">
            </el-date-picker>
            <el-date-picker
                v-if="type === 'daterange'"
                v-model="value"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-select v-if="type === 'select'" multiple collapse-tags clearable filterable v-model="value" @change="changeSelections">
                <el-option
                    v-for="(item, index) in selectionsList"
                    :label="item.label"
                    :value="item.value"
                    :key="index">
                </el-option>
            </el-select>
            <el-input v-if="type === 'input'" v-model="value" @focus="changeInputValue"></el-input>
        </div>
        <slot slot="reference"></slot>
    </el-popover>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";

@Component({
    name: "HeaderFilter"
})
export default class HeaderFilter extends Vue {
    @Prop({ required: true }) private type!: string;
    @Prop({ default: "" }) private defaultValue: any;

    show = false
    value: any = ""
    areaValue: any = {};
    showModel: string[] = ['province', 'city', 'area']
    oldChooseData: any = []
    selectionsList: any = []

    @Watch("defaultValue", { immediate: true })
    changeCityCode(val: any) {
        this.value = val;
    }

    created() {
        switch (this.$route.name) {
        case "RegionalTown":
            this.showModel.push("town");
            break;
        case "RegionalVillage":
            this.showModel.push("town", "village");
            break;
        }
    }

    changeCity(value: any) {
        this.areaValue = value;
    }

    changeTime() {
        this.show = false;
    }

    changeInputValue() {
        this.show = false;
    }

    changeSelections(val: any) {
        const allSelection = this.selectionsList.map((item: any) => item.value);
        if (val.includes("ALL_SELECT")) {
            if (this.oldChooseData.includes("ALL_SELECT")) {
                if (val.length < allSelection.length) {
                    const index = val.indexOf('ALL_SELECT');
                    this.value.splice(index, 1);
                }
            } else {
                this.value = allSelection;
            }
        } else {
            if (this.oldChooseData.includes("ALL_SELECT")) {
                this.value = [];
            } else {
                if (val.length === allSelection.length - 1) {
                    this.value = allSelection;
                }
            }
        }
        this.oldChooseData = this.value;
    }

    // 查询政级id
    getAreaId() {
        let name = "";
        for (let i = this.showModel.length - 1; i >= 0; i--) {
            if (this.areaValue[this.showModel[i]].name === "") {
                continue;
            } else {
                name = `askCity${this.showModel[i]}PanelRef`;
                break;
            }
        }
        const list = (this.$refs.cityCascader as any).$refs[name][0].sourceList;
        return list.filter((item: any) => item.code.toString() === this.value)[0].id;
    }

    // 关闭时
    popperHide() {
        this.$emit("close", {
            type: this.type,
            data: this.type === "regional" ? this.value ? this.getAreaId() : "" : this.value
        });
    }
}
</script>

<style lang="scss" scoped>
/deep/.el-range-separator {
    min-width: 24px;
}
</style>
